<template>
  <ga-modal v-model:visible="visible" :width="640" @close="handleCancel(formRef)">
    <template #title>更改配置</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ShadowBox title="已选中1台云主机基本信息" :headerBottom="false">
        <template #main_info>
          <div class="vm_info">
            <div class="flex_between_aligncenter">
              <p>规格</p>
              <p>系统盘</p>
              <p>外挂盘</p>
            </div>
            <div class="flex_between_aligncenter">
              <p>{{ current?.cpuCores + "CPU" }} | {{ current?.memory / 1024 + "GB" }}</p>
              <p>{{ 999 }}GB</p>
              <p>{{ current?.cpuCores + "GB" }} | {{ 1 + "块" }}</p>
            </div>
          </div>
        </template>
      </ShadowBox>
      <BorderBox
        title="规格信息"
        :wrapperStyle="{
          marginTop: '8px',
        }"
        :styleText="{ padding: '0 8px 8px' }"
      >
        <template #main_info>
          <div class="flex">
            <ga-select
              v-model="listQuery.vcpu"
              allow-clear
              allow-create
              style="width: 160px; margin-right: 16px"
              placeholder="全部vCPU"
              @change="fetchData"
            >
              <ga-option v-for="(item, idx) in cpuType" :key="idx" :value="item.value">
                {{ item.label }}
              </ga-option>
            </ga-select>
            <ga-select
              v-model="listQuery.memory"
              style="width: 160px"
              placeholder="全部内存"
              allow-create
              allow-clear
              @change="fetchData"
            >
              <ga-option v-for="item in memType" :key="item.id" :value="item.value">
                {{ item.label }}
              </ga-option>
            </ga-select>
          </div>
          <ga-table
            style="margin-top: 8px"
            size="small"
            :scroll="{ y: 200 }"
            row-key="id"
            :pagination="false"
            :row-selection="{ type: 'radio', width: 50 }"
            :columns="columns"
            :data="tableData"
            :bordered="false"
            :hoverable="false"
            v-model:selectedKeys="selectedId"
          />
        </template>
      </BorderBox>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { createSnapshot } from "@/api/vm";
import { getComputingSolutionList } from "@/api/computingSolution";
import useLoading from "@/hooks/loading";
import { cpuType, memType } from "@/constant";

const { loading, setLoading } = useLoading(false);
const okLoading = ref(false);
const listQuery = reactive({
  limit: -1,
  // type: "system",
  vcpu: "",
  memory: "",
});
const visible = ref(false);
const current = ref("");
const selectedId = ref([]);
const open = async (record) => {
  visible.value = true;
  setLoading(true);
  current.value = record;
  fetchData();
};
// 获取计算方案列表
const tableData = ref([]);
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getComputingSolutionList(listQuery);
    tableData.value = data.items?.map((item) => ({
      ...item,
      disabled:
        item.vcpu === current.value?.cpuCores &&
        item.memory === current.value?.memory / 1024,
    }));
  } finally {
    setLoading(false);
  }
};
const columns = [
  {
    title: "CPU",
    dataIndex: "vcpu",
    render: ({ record }) => {
      return record.vcpu + "核";
    },
  },
  {
    title: "内存",
    dataIndex: "memory",
    render: ({ record }) => {
      return record.memory + "GB";
    },
  },
  {
    title: "CPU型号",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
  },
];
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  console.log("selectedId", selectedId.value);

  // if (!res) {
  okLoading.value = true;
  // try {
  //   const obj = formatVpcCreateParams(type, formData, tableData.value);
  //   const { code } = await createSnapshot(obj, "network-vpc");
  //   if (code === 20000) Message.success("操作成功");
  //   emits("fetchData");
  //   visible.value = false;
  // } finally {
  //   okLoading.value = true;
  // }
  // }
};
const handleCancel = () => {
  current.value = "";
  selectedId.value = [];
  tableData.value = [];
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
